<template>
  <div class="register">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-md-offset-5 col-xs-6 col-xs-offset-3">
          <img src="../../assets/logo1.png" class="text-center" style="width: 50%;margin: 25% 25% 0 25%;">
          <h3 class="text-center">绑定账号</h3>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <van-form @submit="onSubmit" >
            <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{pattern:userpattern,required: true, message: '请输入2-10位无特殊字符组成的用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ pattern: passwordpattern,required: true, message: '请输入6-10位无符号组成的密码' }]"
            />
            <div style="margin: 16px;">
              <van-button :loading="regloading" loading-text="绑定中..."  block round size="large" type="info" native-type="submit">绑定</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs';
import {wxBind} from "../../utils/api";
export default {
  name: "UserBind",
  data(){
    return {
      username:'',
      password:'',
      msg:'',
      regloading:false,
      userpattern:/^[(a-zA-Z0-9\u4e00-\u9fa5)]{2,10}$/,
      passwordpattern:/^[0-9a-zA-Z]{6,10}$/,
    }
  },
  methods:{
    onSubmit(){
      if(!this.$route.query.id){
        this.$notify({
          title: '绑定失败',
          message: `缺少必要参数，请回到登录页面，重新微信登录授权`,
          type: 'error'
        });
        this.$router.replace("/login");
        return
      }
      this.regloading=true;
      wxBind(qs.stringify({
        username:this.username,password:this.password,openid:this.$route.query.id})
      ).then(response=>{
        if(response.status==146 || response.status==147 || response.status==999){
          this.$notify({
            title: '绑定失败',
            message: response.msg,
            type: 'error'
          });
          this.regloading=false;
        }else if(response.status==200){
          this.$notify({
            title: '绑定成功',
            message: '恭喜绑定成功，快去试试微信快捷登录功能吧',
            type: 'success'
          });
          if(response.email){
            this.regloading=false;
            this.$router.go(-2)
            this.$router.replace("/login");
          }else{
            this.$confirm('未绑定找回密码的邮箱', '提示', {
              confirmButtonText: '前去绑定',
              cancelButtonText: '暂不绑定'
            })
            .then(() => {
              //绑定
              this.$router.replace('/bindemail')
            })
            .catch(action => {
              //不绑定
              this.regloading=false;
              this.$router.replace("/login");
            });
          }
        }
      }).catch(error=>{
        this.regloading=false;
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
